import 'package:flutter/material.dart';

class CustomersScreen extends StatefulWidget {
  const CustomersScreen({Key? key}) : super(key: key);

  @override
  State<CustomersScreen> createState() => _CustomersScreenState();
}

class _CustomersScreenState extends State<CustomersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<Map<String, dynamic>> _customers = [];
  bool _selectAll = false;

  // رەڭلىك ئايكونلار ئۈچۈن رەڭلەر
  final List<Color> _avatarColors = [
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.purple,
    Colors.red,
  ];

  @override
  void initState() {
    super.initState();
    _loadCustomers();
  }

  void _loadCustomers() {
    // سىناق سانلىق مەلۇماتلار
    _customers = [
      {
        'name': 'ئالىم تۇرسۇن',
        'contact': 'ئەركىن ئابدۇللا',
        'phone': '17399544000',
        'address': 'ئۈرۈمچى شەھىرى',
        'note': 'مۇھىم خېرىدار',
        'icon': Icons.person,
        'color': _avatarColors[0],
      },
      {
        'name': 'دىلبەر مەمەت',
        'contact': 'نۇر ئەخمەت',
        'phone': '15886679787',
        'address': 'قەشقەر شەھىرى',
        'note': 'يېڭى خېرىدار',
        'icon': Icons.person_outline,
        'color': _avatarColors[1],
      },
    ];
  }

  void _showAddCustomerDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('يېڭى خېرىدار قوشۇش'),
        content: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                decoration: const InputDecoration(
                  labelText: 'خېرىدار نامى',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 16),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'مەسئۇل كىشى',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 16),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'تېلېفون نومۇرى',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.phone,
              ),
              const SizedBox(height: 16),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'ئادرېس',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 16),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'ئىزاھات',
                  border: OutlineInputBorder(),
                ),
                maxLines: 3,
              ),
            ],
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('بىكار قىلىش'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text('ساقلاش'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: Container(
          color: const Color(0xFFF0F2F5),
          child: Column(
            children: [
              // باش قىسمى
              Container(
                height: 180,
                padding:
                    const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 1,
                      offset: Offset(0, 1),
                    ),
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // تېما ۋە ئىزاھات قىسمى
                    Row(
                      children: [
                        Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: Colors.blue.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(12),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.blue.withOpacity(0.1),
                                blurRadius: 8,
                                offset: const Offset(0, 2),
                                spreadRadius: 0,
                              ),
                            ],
                          ),
                          child: const Icon(
                            Icons.people,
                            color: Colors.blue,
                            size: 28,
                          ),
                        ),
                        const SizedBox(width: 16),
                        const Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'خېرىدار باشقۇرۇش',
                              style: TextStyle(
                                fontSize: 24,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            Text(
                              'خېرىدارلارنى باشقۇرۇش ۋە تەكشۈرۈش',
                              style: TextStyle(
                                color: Colors.grey,
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    // كۇنۇپكىلار قىسمى
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        _buildButton(
                          icon: Icons.add_circle_outline,
                          label: 'يېڭى قۇرۇش',
                          backgroundColor: Colors.blue,
                          textColor: Colors.white,
                          onPressed: _showAddCustomerDialog,
                        ),
                        const SizedBox(width: 8),
                        _buildButton(
                          icon: Icons.filter_alt_outlined,
                          label: 'سۈزۈش',
                          onPressed: () {},
                        ),
                        const SizedBox(width: 8),
                        _buildButton(
                          icon: Icons.refresh_rounded,
                          label: 'يېڭىلاش',
                          onPressed: () {},
                        ),
                        const SizedBox(width: 8),
                        _buildButton(
                          icon: Icons.file_download_outlined,
                          label: 'چىقىرىش',
                          onPressed: () {},
                        ),
                        const SizedBox(width: 8),
                        _buildButton(
                          icon: Icons.file_upload_outlined,
                          label: 'كىرگۈزۈش',
                          onPressed: () {},
                        ),
                      ],
                    ),
                    // ئىزدەش قىسمى
                    SizedBox(
                      width: 300,
                      child: TextField(
                        controller: _searchController,
                        textDirection: TextDirection.rtl,
                        decoration: InputDecoration(
                          hintText: 'خېرىدار ئىزدەش...',
                          prefixIcon: const Icon(Icons.search),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(4),
                            borderSide:
                                const BorderSide(color: Color(0xFFE5E5E5)),
                          ),
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 8,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              // جەدۋەل قىسمى
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(24),
                  child: Card(
                    elevation: 0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                      side: const BorderSide(color: Color(0xFFE5E5E5)),
                    ),
                    child: Column(
                      children: [
                        // جەدۋەل باش قىسمى
                        Container(
                          padding: const EdgeInsets.all(16),
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(color: Color(0xFFE5E5E5)),
                            ),
                          ),
                          child: Row(
                            children: [
                              _buildButton(
                                icon: Icons.file_upload,
                                label: 'كىرگۈزۈش',
                                onPressed: () {},
                              ),
                              const SizedBox(width: 8),
                              _buildButton(
                                icon: Icons.file_download,
                                label: 'چىقىرىش',
                                onPressed: () {},
                              ),
                            ],
                          ),
                        ),
                        // جەدۋەل
                        Expanded(
                          child: SingleChildScrollView(
                            child: DataTable(
                              columns: const [
                                DataColumn(
                                  label: SizedBox(
                                    width: 40,
                                    child: Checkbox(
                                      value: false,
                                      onChanged: null,
                                    ),
                                  ),
                                ),
                                DataColumn(label: Text('خېرىدار نامى')),
                                DataColumn(label: Text('مەسئۇل كىشى')),
                                DataColumn(label: Text('تېلېفون نومۇرى')),
                                DataColumn(label: Text('ئادرېس')),
                                DataColumn(label: Text('ئىزاھات')),
                                DataColumn(label: Text('مەشغۇلات')),
                              ],
                              rows: _customers.map((customer) {
                                return DataRow(
                                  cells: [
                                    DataCell(
                                      Checkbox(
                                        value: false,
                                        onChanged: (value) {},
                                      ),
                                    ),
                                    DataCell(
                                      Row(
                                        children: [
                                          CircleAvatar(
                                            radius: 20,
                                            backgroundColor: customer['color'],
                                            child: Icon(
                                              customer['icon'],
                                              color: Colors.white,
                                              size: 24,
                                            ),
                                          ),
                                          const SizedBox(width: 12),
                                          Text(customer['name']),
                                        ],
                                      ),
                                    ),
                                    DataCell(Text(customer['contact'])),
                                    DataCell(Text(customer['phone'])),
                                    DataCell(Text(customer['address'])),
                                    DataCell(Text(customer['note'])),
                                    DataCell(
                                      Row(
                                        children: [
                                          IconButton(
                                            icon: const Icon(Icons.edit,
                                                color: Colors.blue),
                                            onPressed: () {},
                                          ),
                                          IconButton(
                                            icon: const Icon(Icons.delete,
                                                color: Colors.red),
                                            onPressed: () {},
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                );
                              }).toList(),
                            ),
                          ),
                        ),
                        // جەدۋەل ئاستى قىسمى
                        Container(
                          padding: const EdgeInsets.all(16),
                          decoration: const BoxDecoration(
                            border: Border(
                              top: BorderSide(color: Color(0xFFE5E5E5)),
                            ),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'جەمئىي ${_customers.length} خېرىدار',
                                style: const TextStyle(color: Colors.grey),
                              ),
                              Row(
                                children: [
                                  _buildPaginationButton('ئالدىنقى'),
                                  const SizedBox(width: 8),
                                  _buildPaginationButton('1', isActive: true),
                                  const SizedBox(width: 8),
                                  _buildPaginationButton('كېيىنكى'),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildButton({
    required IconData icon,
    required String label,
    required VoidCallback onPressed,
    Color? backgroundColor,
    Color? textColor,
  }) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor ?? Colors.grey[100],
        foregroundColor: textColor ?? Colors.black87,
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4),
        ),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 18),
          const SizedBox(width: 8),
          Text(label),
        ],
      ),
    );
  }

  Widget _buildPaginationButton(String text, {bool isActive = false}) {
    return ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        backgroundColor: isActive ? Colors.blue : Colors.white,
        foregroundColor: isActive ? Colors.white : Colors.black87,
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4),
          side: isActive
              ? BorderSide.none
              : const BorderSide(color: Color(0xFFE5E5E5)),
        ),
      ),
      child: Text(text),
    );
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}
